<script setup lang="ts">

import {UserOutlined} from "@ant-design/icons-vue";
import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import user from "~/contentScripts/views/tao/list/components/user.vue";
import BatchAddingPlans from "~/contentScripts/views/wxt/BatchAddingPlans.vue";
import BatchAddingProducts from "~/contentScripts/views/wxt/BatchAddingProducts.vue";
import {WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import SuperOptimization from "~/contentScripts/views/wxt/SuperOptimization.vue";
import {isLogin} from "~/logic";

const __option = getCurrentInstance()?.appContext.provides.option;

onMounted(() => {
  WxtUtils.getAccess();
  const id = inject('ID');
  setTimeout(() => {
    document.querySelector('#' + id + ' .wxtMain')?.classList.remove('active');
  }, 3000);
  const element = document.querySelector('#' + id);
  let isDragging = false;
  let initialX: number;
  let initialY: number;

  element?.addEventListener('mousedown', startDrag);
  element?.addEventListener('mouseup', stopDrag);
  element?.addEventListener('mouseleave', stopDrag);
  element?.addEventListener('mousemove', drag);

  function startDrag(e: { clientX: number; clientY: number; }) {
    isDragging = true;
    initialX = e.clientX;
    initialY = e.clientY;
  }

  function stopDrag() {
    isDragging = false;
  }

  function drag(e: { clientX: number; clientY: number; }) {
    if (isDragging) {
      const dx = initialX - e.clientX;
      const dy = e.clientY - initialY;
      element.style.right = `${parseFloat(element.style.right) + dx}px`;
      element.style.top = `${element.offsetTop + dy}px`;
      initialX = e.clientX;
      initialY = e.clientY;
    }
  }
})

const visibleSuperOptimization = ref(false);
const visibleBatchAddingProducts = ref(false);
const visibleBatchAddingPlans = ref(false);
const loginVisible = ref(false);
const openSuperOptimization = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    visibleSuperOptimization.value = true;
  }
}
const openBatchAddingProducts = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    visibleBatchAddingProducts.value = true;
  }
}
const openBatchAddingPlans = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    visibleBatchAddingPlans.value = true;
  }
}
</script>

<template>
  <base-app id="wxt">
    <a-row class="wxtMain active">
      <div class="toShow">
        <a-col class="icon"><a href="http://www.xingcha365.com/" target="_blank"><img
            src="../../../assets/icon-trans.png"
        ></a></a-col>
      </div>
      <div class="showBox">
        <a-col class="icon"><a href="http://www.xingcha365.com/" target="_blank"><img
            src="../../../assets/icon-trans.png"
        ></a></a-col>
        <a-col class="content" flex="1">
          <a-row type="flex" style="height: 25px;overflow: hidden;">
            <a-col class="item">
              <a @click="openSuperOptimization">
                超级优化
              </a>
            </a-col>

            <a-col class="item">
              <a type="link" @click="openBatchAddingProducts">
                批量添加商品
              </a>
            </a-col>
<!--            <a-col class="item">-->
<!--&lt;!&ndash;              @click="openBatchAddingPlans"&ndash;&gt;-->
<!--              <a type="link" class="disabled">-->
<!--                批量创建计划-->
<!--              </a>-->
<!--            </a-col>-->
            <a-col class="item">
              <user type="ghost" :style="{
            marginRight:0,
            marginLeft:0,
            padding:0,
          }"
              >
                <UserOutlined class="a"/>
              </user>
            </a-col>
          </a-row>
        </a-col>
      </div>

    </a-row>
    <user-login-modal v-model:login-visible="loginVisible" @close="()=>loginVisible=false"/>
    <SuperOptimization v-model:visible="visibleSuperOptimization"/>
    <BatchAddingProducts v-model:visible="visibleBatchAddingProducts"/>
    <BatchAddingPlans v-model:visible="visibleBatchAddingPlans"/>
  </base-app>
</template>

<style lang="less" scoped>
.wxtMain {
  width: 52px;
  padding: 10px 10px;
  background: #fff;
  border-radius: 50px;
  cursor: move;
  overflow: hidden;
  // 阴影
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  transition: all .5s;
  // 禁用复制
  user-select: none;

  .toShow {
    display: block;

    .icon {
      width: 32px;
      // 禁止拖拽图片
      pointer-events: none;
    }
  }

  .showBox {
    display: none;
  }

  &:hover, &.active {
    padding: 10px 20px;
    width: 258px;

    .toShow {
      display: none;
    }

    .showBox {
      display: flex;
    }
  }


  .icon {
    width: 26px;

    img {
      max-width: 100%;
      user-select: none;
      // 禁止拖拽图片
      pointer-events: none;
    }
  }

  .content {
    border: 1px solid #1677ff;
    background: rgba(64, 158, 255, .15);
    border-radius: 5px;
    margin-left: 10px;

    user-select: none;

    .item {
      font-size: 12px;
      height: 25px;
      overflow: hidden;
      user-select: none;

      a, .a {
        height: 100%;
        user-select: none;
        display: flex;
        align-items: center;
        padding: 2px 5px;
        border-left: 2px solid #00000000;
        border-right: 2px solid #00000000;
        border-radius: 3px;
        color: #1677ff;

        &:hover {
          background: #1677ff;
          color: #fff;
        }
        &.disabled {
          color: #999;
          cursor: not-allowed;
          &:hover {
            background: #fff;
            color: #999;
          }
        }
      }
    }

    .item:not(:last-child) {
      border-right: 1px solid #1677ff;
    }
  }
}
</style>
<style lang="less">
.xc-ant-tabs-content-top{
  height: 100%;
}
</style>
